disply flex  

ＰＣは横並び、スマホは縦並び。

htmlは共通

<header class="page_header">
	 
	    <a href="リンク先" class="logo" >
		<img src="ロゴ画像" width="140px" height="140px" >
		<h1>タイトル</h1></a>
		
		<nav>
		<ul class="main_nav">		
		
		<li><a href="menu1" >menu1</a></li>
		
		<li><a href="menu2" >menu2</a></li>

		<li><a href="menu3" >menu3</a></li>

		<li><a href="menu4" >menu4</a></li>
		
		<li><a href="blogアドレス" target="_blank" >Blog</a></li>
		
		</ul>
		</nav>
		
		</header>

ＰＣ用、css記載。

	/*ロゴ*/
.logo{
	  position: relative;
      display:flex;　　　　　　　　　　　　　/*　横並び　*/
      width: 350px;
	  margin-top: 0%;
      margin-left: 5%;       
	  }

.logo > h1{
	  font-family: 'Noto Serif JP', serif;
        color: 　#2b2b2b　;
		font-size:2.5rem;
	  }

.main_nav{                                     /* メニュー */
        display:flex;
		margin-top:40px;　　　                 /* 位置 */
		margin-right:40px;
		font-family: 'Noto Serif JP', serif;
		font-size:1.3rem;
		font-weight: 400;
		}
   
ul{
   list-style:none;
   }

li{
   margin-left:40px;　　　　　                         /* 間隔 */
	}

スマホ用、css記載。

@media screen and (max-width: 767px) {                  /* スクリーンサイズが767px以下の場合に適用 */

.logo{　　　　　　　　　　　　　　　　　　　　　/*　ロゴ　*/
	  position: relative;
      display:flex;　　　　　　　　　　　　　　/*　横並び　*/
      width: 350px;
	  margin-top: 0%;
      margin-left: 5%;       
	  }

.logo > h1{
	  font-family: 'Noto Serif JP', serif;
        color: 　#2b2b2b　;
		font-size:2rem;
	  }

.main_nav{                                    　　  /* メニュー */
        flex-direction:column;                      /* 縦並び */
		margin-top:0px;
		margin-right:0px;
		font-family: 'Noto Serif JP', serif;
		font-size:1.3rem;
		}
   
ul{
   list-style:none;
   }

li{
   margin-left:-20px;　                            /* 間隔 */
	}